import React, { Component, Fragment, PureComponent } from 'react';

import { connect } from 'dva';
import {
  Form,
  Card,
  Select,
  List,
  Tag,
  Icon,
  Tooltip,
  Row,
  Col,
  Button,
  Input,
  Modal,
  Steps,
  message,
  Upload,
  Spin,
  InputNumber,
  DatePicker,
} from 'antd';
import StandardFormRow from '@/components/StandardFormRow';
import CrowdActivityCenter from '@/components/CrowdActivity';
import styles from './CrowdArticle.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
import moment from 'moment';

const { RangePicker } = DatePicker;
const { Option } = Select;
const FormItem = Form.Item;
const { Step } = Steps;

@connect(({ crowd, loading }) => ({
  crowd,
  loading: loading.models.crowd,
}))
@Form.create()
class CreateForm extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      imageUrl: '',
      currentStep: 0,
      start_time: '',
      end_time: '',
    };
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  handleNext = currentStep => {
    const { form, handleAdd } = this.props;
    const { formVals: oldValue, start_time, end_time } = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formVals = { ...oldValue, ...fieldsValue, start_time, end_time };
      this.setState({ formVals }, () => {
        if (currentStep < 2) {
          this.forward();
        } else {
          handleAdd(formVals);
          this.setState({ currentStep: 0, imageUrl: '' });
        }
      });
    });
  };

  backward = () => {
    const { currentStep } = this.state;
    this.setState({
      currentStep: currentStep - 1,
    });
  };

  forward = () => {
    const { currentStep } = this.state;
    this.setState({
      currentStep: currentStep + 1,
    });
  };

  getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }

  beforeUpload(file) {
    //限制图片 格式、size、分辨率
    const isJPG = file.type === 'image/jpeg';
    const isGIF = file.type === 'image/gif';
    const isPNG = file.type === 'image/png';
    if (!(isJPG || isGIF || isPNG)) {
      Modal.error({
        title: '只能上传JPG 、JPEG 、GIF、 PNG格式的图片~',
      });
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      Modal.error({
        title: '超过2M限制 不允许上传~',
      });
    }
    return (isJPG || isGIF || isPNG) && isLt2M;
  }

  handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      this.getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          loading: false,
        })
      );
    }
  };

  activityTime = (value, dateString) => {
    this.setState({ start_time: dateString[0], end_time: dateString[1] });
  };

  range = (start, end) => {
    const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  };

  disabledDate(current) {
    return current && current < moment().endOf('day');
  }

  renderContent = currentStep => {
    const {
      form,
      crowd: { crowdData },
      provinceData,
    } = this.props;
    const imageUrl = this.state.imageUrl;
    const cities = this.state.cities;
    const secondCity = this.state.secondCity;
    const controls = [
      'undo',
      'bold',
      'underline',
      'text-color',
      'hr',
      'emoji',
      'separator',
      'font-size',
      'line-height',
      'letter-spacing',
      'separator',
      'clear',
      'media',
    ];
    const myUploadFn = param => {
      const serverURL = '/api/api/0.0.1/tool/upload/img';
      const xhr = new XMLHttpRequest();
      const fd = new FormData();

      const successFn = response => {
        // 假设服务端直接返回文件上传后的地址
        // 上传成功后调用param.success并传入上传后的文件地址
        const img_url = JSON.parse(response.currentTarget.response).data.img_path;
        param.success({
          url: img_url,
        });
      };

      const progressFn = event => {
        // 上传进度发生变化时调用param.progress
        param.progress((event.loaded / event.total) * 100);
      };

      const errorFn = response => {
        // 上传发生错误时调用param.error
        param.error({
          msg: '上传失败',
        });
      };

      xhr.upload.addEventListener('progress', progressFn, false);
      xhr.addEventListener('load', successFn, false);
      xhr.addEventListener('error', errorFn, false);
      xhr.addEventListener('abort', errorFn, false);

      fd.append('img', param.file);
      xhr.open('POST', serverURL, true);
      xhr.send(fd);
    };
    const myValidateFn = file => {
      if (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png') {
        if (file.size < 1024 * 1000) {
          return true;
        } else {
          message.error('文件大小不能超过1M');
          return false;
        }
      } else {
        message.error('文件类型只能是JPG,JPEG,PNG格式');
        return false;
      }
    };
    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    if (currentStep === 1) {
      return [
        <FormItem key="time" {...this.formLayout} label="活动时间">
          {form.getFieldDecorator('time', {
            rules: [{ required: true, message: '请选择活动时间' }],
          })(
            <RangePicker
              disabledDate={this.disabledDate}
              format={'YYYY-MM-DD'}
              style={{ width: '100%' }}
              placeholder={['开始时间', '结束时间']}
              onChange={this.activityTime}
            />
          )}
        </FormItem>,
        <FormItem key="imgurl" {...this.formLayout} label="列表图片">
          {form.getFieldDecorator('imgurl', {
            rules: [
              {
                required: true,
                message: '请上传图片',
              },
            ],
          })(
            <Upload
              name="img"
              listType="picture-card"
              className={styles.avataruploader}
              showUploadList={false}
              action="https://community.guoxiaoge.cn/api/0.0.1/tool/upload/img"
              beforeUpload={this.beforeUpload}
              onChange={this.handleChange}
            >
              {imageUrl ? (
                <img style={{ height: 100 }} src={imageUrl} alt="avatar" />
              ) : (
                uploadButton
              )}
            </Upload>
          )}
        </FormItem>,
      ];
    }

    if (currentStep === 2) {
      return [
        <FormItem key="introduce">
          {form.getFieldDecorator('introduce', {
            rules: [
              {
                required: true,
                validator: (_, value, callback) => {
                  if (value.isEmpty()) {
                    callback('请输入详细介绍');
                  } else {
                    callback();
                  }
                },
              },
            ],
          })(
            <BraftEditor
              className="my-editor"
              media={{
                uploadFn: myUploadFn,
                validateFn: myValidateFn,
              }}
              controls={controls}
              placeholder="请输入详细介绍"
            />
          )}
        </FormItem>,
      ];
    }
    return [
      <FormItem key="crowd_id" {...this.formLayout} label="活动所属群">
        {form.getFieldDecorator('crowd_id', {
          rules: [{ required: true, message: '请选择一个群！' }],
        })(
          <Select placeholder="请选择" style={{ width: '100%' }}>
            {crowdData.map(function(item) {
              return (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        )}
      </FormItem>,
      <FormItem key="title" {...this.formLayout} label="活动标题">
        {form.getFieldDecorator('title', {
          rules: [{ required: true, message: '请输入活动标题！' }],
        })(<Input placeholder="请输入" />)}
      </FormItem>,
      <FormItem key="address" {...this.formLayout} label="活动地址">
        {form.getFieldDecorator('address', {
          rules: [{ required: true, message: '请输入活动地址！' }],
        })(<Input placeholder="请输入" />)}
      </FormItem>,
      <FormItem key="charge" {...this.formLayout} label="参与活动费用">
        {form.getFieldDecorator('charge', {
          initialValue: 0,
        })(<InputNumber />)}
      </FormItem>,
      <FormItem key="take_num" {...this.formLayout} label="可参与人数">
        {form.getFieldDecorator('take_num', {
          initialValue: 1,
          rules: [
            { required: true, message: '请输入可参与人数' },
            { type: 'number', min: 1, message: '不能小于1' },
          ],
        })(<InputNumber />)}
      </FormItem>,
    ];
  };

  renderFooter = currentStep => {
    const { handleModalVisible } = this.props;
    if (currentStep === 1) {
      return [
        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
          上一步
        </Button>,
        <Button key="cancel" onClick={() => handleModalVisible()}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
          下一步
        </Button>,
      ];
    }
    if (currentStep === 2) {
      return [
        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
          上一步
        </Button>,
        <Button key="cancel" onClick={() => handleModalVisible()}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
          完成
        </Button>,
      ];
    }
    return [
      <Button key="cancel" onClick={() => handleModalVisible()}>
        取消
      </Button>,
      <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
        下一步
      </Button>,
    ];
  };

  render() {
    const { modalVisible, handleModalVisible } = this.props;
    const { currentStep } = this.state;

    return (
      <Modal
        width={740}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title="新增活动"
        visible={modalVisible}
        footer={this.renderFooter(currentStep)}
        onCancel={() => handleModalVisible()}
      >
        <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
          <Step title="第一步" />
          <Step title="第二步" />
          <Step title="第三步" />
        </Steps>
        {this.renderContent(currentStep)}
      </Modal>
    );
  }
}

@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      formVals: {
        headimgurl: props.values.headimgurl,
        name: props.values.name,
        nick_name: props.values.nick_name,
        updated_at: props.values.updated_at,
        address: props.values.address, //地址
        charge: props.values.charge, //费用
        created_at: props.values.created_at,
        crowd_id: props.values.crowd_id, //群ID
        end_time: props.values.end_time, //结束时间
        start_time: props.values.start_time, //开始时间
        take_num: props.values.take_num, //可参与人数
        id: props.values.id, //活动ID
        title: props.values.title, //活动标题
        imgurl: props.values.imgurl, //活动列表图
        introduce: props.values.introduce, //活动介绍
        center: props.values.center,
      },
      currentStep: 0,
      imgurl: props.values.imgurl,
      startTime: '',
      endTime: '',
    };
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  handleNext = currentStep => {
    const { form, handleUpdate } = this.props;
    const { formVals: oldValue, startTime, endTime } = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formVals = { ...oldValue, ...fieldsValue, startTime, endTime };
      this.setState(
        {
          formVals,
        },
        () => {
          if (currentStep < 2) {
            this.forward();
          } else {
            handleUpdate(formVals);
          }
        }
      );
    });
  };

  backward = () => {
    const { currentStep } = this.state;
    this.setState({
      currentStep: currentStep - 1,
    });
  };

  forward = () => {
    const { currentStep } = this.state;
    this.setState({
      currentStep: currentStep + 1,
    });
  };

  getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }

  beforeUpload(file) {
    //限制图片 格式、size、分辨率
    const isJPG = file.type === 'image/jpeg';
    const isGIF = file.type === 'image/gif';
    const isPNG = file.type === 'image/png';
    if (!(isJPG || isGIF || isPNG)) {
      Modal.error({
        title: '只能上传JPG 、JPEG 、GIF、 PNG格式的图片~',
      });
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      Modal.error({
        title: '超过2M限制 不允许上传~',
      });
    }
    return (isJPG || isGIF || isPNG) && isLt2M;
  }

  handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.getBase64(info.file.originFileObj, imgurl =>
        this.setState({
          imgurl,
          loading: false,
        })
      );
    }
  };

  activityTime = (value, dateString) => {
    this.setState({ startTime: dateString[0], endTime: dateString[1] });
  };

  renderContent = (currentStep, formVals) => {
    const { form } = this.props;
    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    const imageUrl = this.state.imgurl;
    const controls = [
      'undo',
      'bold',
      'underline',
      'text-color',
      'hr',
      'emoji',
      'separator',
      'font-size',
      'line-height',
      'letter-spacing',
      'separator',
      'clear',
      'media',
    ];
    const myUploadFn = param => {
      const serverURL = 'https://community.guoxiaoge.cn/api/0.0.1/tool/upload/img';
      const xhr = new XMLHttpRequest();
      const fd = new FormData();

      const successFn = response => {
        // 假设服务端直接返回文件上传后的地址
        // 上传成功后调用param.success并传入上传后的文件地址
        const img_url = JSON.parse(response.currentTarget.response).data.img_path;
        param.success({
          url: img_url,
        });
      };

      const progressFn = event => {
        // 上传进度发生变化时调用param.progress
        param.progress((event.loaded / event.total) * 100);
      };

      const errorFn = response => {
        // 上传发生错误时调用param.error
        param.error({
          msg: '上传失败',
        });
      };

      xhr.upload.addEventListener('progress', progressFn, false);
      xhr.addEventListener('load', successFn, false);
      xhr.addEventListener('error', errorFn, false);
      xhr.addEventListener('abort', errorFn, false);

      fd.append('img', param.file);
      xhr.open('POST', serverURL, true);
      xhr.send(fd);
    };
    const myValidateFn = file => {
      if (file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png') {
        if (file.size < 1024 * 1000) {
          return true;
        } else {
          message.error('文件大小不能超过1M');
          return false;
        }
      } else {
        message.error('文件类型只能是JPG,JPEG,PNG格式');
        return false;
      }
    };
    if (currentStep === 1) {
      return [
        <FormItem key="time" {...this.formLayout} label="活动时间">
          {form.getFieldDecorator('time', {
            rules: [{ required: true, message: '请选择活动时间' }],
            initialValue: [moment(formVals.start_time), moment(formVals.end_time)],
          })(
            <RangePicker
              format={'YYYY-MM-DD'}
              style={{ width: '100%' }}
              placeholder={['开始时间', '结束时间']}
              onChange={this.activityTime}
            />
          )}
        </FormItem>,
        <FormItem key="imgurl" {...this.formLayout} label="列表图片">
          {form.getFieldDecorator('imgurl', {
            rules: [
              {
                required: true,
                message: '请上传图片',
              },
            ],
            initialValue: formVals.imgurl,
          })(
            <Upload
              name="img"
              listType="picture-card"
              className={styles.avataruploader}
              showUploadList={false}
              action="https://community.guoxiaoge.cn/api/0.0.1/tool/upload/img"
              beforeUpload={this.beforeUpload}
              onChange={this.handleChange}
            >
              {imageUrl ? (
                <img style={{ height: 100 }} src={imageUrl} alt="avatar" />
              ) : (
                uploadButton
              )}
            </Upload>
          )}
        </FormItem>,
      ];
    }

    if (currentStep === 2) {
      return [
        <FormItem key="introduce">
          {form.getFieldDecorator('introduce', {
            rules: [
              {
                required: true,
                validator: (_, value, callback) => {
                  if (value.isEmpty()) {
                    callback('请输入详细介绍');
                  } else {
                    callback();
                  }
                },
              },
            ],
            initialValue: BraftEditor.createEditorState(formVals.introduce),
          })(
            <BraftEditor
              className="my-editor"
              media={{
                uploadFn: myUploadFn,
                validateFn: myValidateFn,
              }}
              controls={controls}
              placeholder="请输入详细介绍"
            />
          )}
        </FormItem>,
      ];
    }
    return [
      <FormItem key="crowd_id" {...this.formLayout}>
        {form.getFieldDecorator('crowd_id', {
          initialValue: formVals.crowd_id,
        })(<Input type="hidden" />)}
      </FormItem>,
      <FormItem key="name" {...this.formLayout} label="群名称">
        {form.getFieldDecorator('name', {
          rules: [{ required: true, message: '请输入群名称！' }],
          initialValue: formVals.name,
        })(<Input readOnly="readonly" />)}
      </FormItem>,
      <FormItem key="title" {...this.formLayout} label="活动标题">
        {form.getFieldDecorator('title', {
          rules: [{ required: true, message: '请输入活动标题！' }],
          initialValue: formVals.title,
        })(<Input />)}
      </FormItem>,
      <FormItem key="nick_name" {...this.formLayout} label="发布人">
        {form.getFieldDecorator('nick_name', {
          rules: [{ required: true, message: '请输入发布人名字！' }],
          initialValue: formVals.nick_name,
        })(<Input readOnly="nick_name" />)}
      </FormItem>,
      <FormItem key="charge" {...this.formLayout} label="参与活动费用">
        {form.getFieldDecorator('charge', {
          initialValue: formVals.charge,
        })(<InputNumber />)}
      </FormItem>,
      <FormItem key="take_num" {...this.formLayout} label="可参与人数">
        {form.getFieldDecorator('take_num', {
          rules: [
            { required: true, message: '请输入可参与人数' },
            { type: 'number', min: 1, message: '不能小于1' },
          ],
          initialValue: formVals.take_num,
        })(<InputNumber min={1} />)}
      </FormItem>,
    ];
  };

  renderFooter = currentStep => {
    const { handleUpdateModalVisible } = this.props;
    if (currentStep === 1) {
      return [
        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
          上一步
        </Button>,
        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
          取消
        </Button>,
        <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
          下一步
        </Button>,
      ];
    }
    if (currentStep === 2) {
      return [
        <Button key="back" style={{ float: 'left' }} onClick={this.backward}>
          上一步
        </Button>,
        <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={() => this.handleNext(currentStep)}>
          完成
        </Button>,
      ];
    }
    return [
      <Button key="cancel" onClick={() => handleUpdateModalVisible()}>
        取消
      </Button>,
      <Button key="forward" type="primary" onClick={() => this.handleNext(currentStep)}>
        下一步
      </Button>,
    ];
  };

  render() {
    const { updateModalVisible, handleUpdateModalVisible } = this.props;
    const { currentStep, formVals } = this.state;

    return (
      <Modal
        width={810}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title="文章修改"
        visible={updateModalVisible}
        footer={this.renderFooter(currentStep)}
        onCancel={() => handleUpdateModalVisible()}
      >
        <Steps style={{ marginBottom: 28 }} size="small" current={currentStep}>
          <Step title="第一步" />
          <Step title="第二步" />
          <Step title="第三步" />
        </Steps>
        {this.renderContent(currentStep, formVals)}
      </Modal>
    );
  }
}

@connect(({ crowd, loading }) => ({
  crowd,
  loading: loading.models.crowd,
}))
@Form.create()
class CrowdActivity extends Component {
  state = {
    crowd_id: [], //群ID
    value: [], //标题关键字
    visible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
    stepFormValues: {},
    modalVisible: false,
    updateModalVisible: false,
    ImgModelVisible: false,
    ImgUrl: '',
  };

  //初始化页面数据
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'crowd/fetchCrowdActivityList',
    });
  }

  //搜索
  handleSubmit = e => {
    e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      this.state.crowd_id = values.crowd_id;
      this.state.value = values.value;
      if (!err) {
        dispatch({
          type: 'crowd/fetchCrowdActivityList',
          payload: {
            crowd_id: values.crowd_id,
            title: values.title,
            pagesize: 5,
          },
        });
      }
    });
  };

  //删除
  showConfirm = payload => {
    const { dispatch } = this.props;
    Modal.confirm({
      title: '删除文章',
      content: '确定删除该文章吗？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        dispatch({
          type: 'crowd/fetchCrowdActivityDel',
          payload: {
            id: payload.id,
          },
        });
      },
    });
  };

  //重置
  Reset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    this.setState({ crowd_id: [], title: [] });
    dispatch({
      type: 'crowd/fetchCrowdActivityList',
      payload: {
        pagesize: 5,
        page: 1,
      },
    });
  };

  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  handleAdd = fields => {
    const { dispatch } = this.props;
    fields.introduce = fields.introduce.toHTML();
    fields.imgurl = fields.imgurl.file.response.data.img_path;
    dispatch({
      type: 'crowd/fetchCrowdActivityAdd',
      payload: fields,
    });

    this.handleModalVisible();
  };

  handleUpdateModalVisible = (flag, item) => {
    this.setState({
      updateModalVisible: !!flag,
      stepFormValues: item || {},
    });
  };

  handleUpdate = fields => {
    const { dispatch } = this.props;
    fields.introduce = fields.introduce.toHTML();
    if (fields.endTime && fields.startTime) {
      fields.start_time = fields.startTime;
      fields.end_time = fields.endTime;
    }

    fields.imgurl = fields.imgurl.file ? fields.imgurl.file.response.data.img_path : fields.imgurl;
    dispatch({
      type: 'crowd/fetchCrowdActivityUpdate',
      payload: fields,
    });

    this.handleUpdateModalVisible();
  };

  showImgModel = (status, value) => {
    this.setState({ ImgModelVisible: status, ImgUrl: value });
  };

  render() {
    const ImgModelVisible = this.state.ImgModelVisible;
    const ImgUrl = this.state.ImgUrl;
    const parentMethods = {
      handleAdd: this.handleAdd,
      handleModalVisible: this.handleModalVisible,
    };
    const updateMethods = {
      handleUpdateModalVisible: this.handleUpdateModalVisible,
      handleUpdate: this.handleUpdate,
    };

    const {
      form,
      crowd: { list, crowdData, pagination },
      loading,
    } = this.props;
    console.log(this.props);
    const { modalVisible, updateModalVisible, stepFormValues } = this.state;
    const { dispatch } = this.props;
    const { getFieldDecorator } = form;
    const IconText = ({ type, text }) => (
      <span>
        <Icon type={type} style={{ marginRight: 8 }} />
        {text}
      </span>
    );

    const formItemLayout = {
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
        md: { span: 12 },
      },
    };
    return (
      <PageHeaderWrapper title="群活动管理" onTabchange={() => this.Reset}>
        <Fragment>
          <Card bordered={false}>
            <div className={styles.tableList}>
              <div className={styles.tableListForm}>
                <Form onSubmit={this.handleSubmit} layout="inline">
                  <StandardFormRow title="搜索" grid last>
                    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                      <Col md={8} sm={24}>
                        <FormItem label="群列表">
                          {getFieldDecorator('crowd_id', {})(
                            <Select
                              onClick={this.Inputtitle}
                              placeholder="请选择"
                              style={{ maxWidth: 300, width: '100%' }}
                            >
                              {crowdData.map(function(item) {
                                return (
                                  <Option key={item.id} value={item.id}>
                                    {item.name}
                                  </Option>
                                );
                              })}
                            </Select>
                          )}
                        </FormItem>
                      </Col>
                      <Col md={8} sm={24}>
                        <FormItem {...formItemLayout} label="标题关键字">
                          {getFieldDecorator('title', {
                            onChange: this.inputdata,
                          })(<Input placeholder="请输入活动标题关键字" />)}
                        </FormItem>
                      </Col>
                      <Col md={8} sm={24}>
                        <span>
                          <Button type="primary" htmlType="submit">
                            查询
                          </Button>
                          <Button style={{ marginLeft: 8 }} onClick={this.Reset}>
                            重置
                          </Button>
                        </span>
                      </Col>
                    </Row>
                  </StandardFormRow>
                </Form>
              </div>
            </div>
          </Card>
          <Spin spinning={loading}>
            <Card
              style={{ marginTop: 24 }}
              bordered={false}
              bodyStyle={{ padding: '8px 32px 32px 32px' }}
            >
              <Button
                type="dashed"
                style={{ width: '100%', marginBottom: 8 }}
                icon="plus"
                onClick={() => this.handleModalVisible(true)}
              >
                添加
              </Button>
              <List
                size="large"
                rowKey="id"
                itemLayout="vertical"
                pagination={{
                  onChange: (page, pageNumber) => {
                    dispatch({
                      type: 'crowd/fetchCrowdActivityList',
                      payload: {
                        page: page,
                        pagesize: pageNumber,
                        crowd_id: this.state.crowd_id,
                        title: this.state.title,
                      },
                    });
                  },
                  onShowSizeChange: (current, size) => {
                    dispatch({
                      type: 'crowd/fetchCrowdActivityList',
                      payload: {
                        page: current,
                        pagesize: size,
                        crowd_id: this.state.crowd_id,
                        title: this.state.title,
                      },
                    });
                  },

                  showQuickJumper: true,
                  showSizeChanger: true,
                  current: pagination.current ? pagination.current : 1,
                  pageSize: pagination.pagesize ? pagination.pagesize : 5,
                  total: pagination.total ? pagination.total : 0,
                }}
                dataSource={list}
                renderItem={item => (
                  <List.Item
                    key={item.id}
                    extra={
                      <div>
                        <div>
                          <img
                            style={{ cursor: 'pointer' }}
                            onClick={() => this.showImgModel(true, item.imgurl)}
                            width={265}
                            height={142}
                            alt="logo"
                            src={item.imgurl}
                          />
                        </div>
                        <div className={styles.particulars}>
                          <a onClick={() => this.handleUpdateModalVisible(true, item)}>
                            <Icon type="edit" theme="twoTone" /> 修改
                          </a>
                          <a style={{ marginLeft: 10 }} onClick={() => this.showConfirm(item)}>
                            <Icon type="delete" theme="twoTone" /> 删除
                          </a>
                        </div>
                      </div>
                    }
                  >
                    <List.Item.Meta
                      title={
                        <a className={styles.listItemMetaTitle} href={item.href}>
                          <span className={styles.title}>活动标题：</span>
                          {item.title}
                        </a>
                      }
                      description={
                        <div style={{ marginTop: 20 }}>
                          <Tooltip title="群">
                            <Tag color="#2db7f5">{item.name}</Tag>
                          </Tooltip>
                        </div>
                      }
                    />
                    <CrowdActivityCenter data={item} />
                  </List.Item>
                )}
              />
              <Modal
                title={null}
                closable={false}
                visible={ImgModelVisible}
                footer={null}
                onCancel={() => this.showImgModel(false)}
                wrapClassName={styles.web}
                body={ImgUrl}
              >
                <img style={{ width: '100%' }} src={ImgUrl} />
              </Modal>
              <CreateForm {...parentMethods} modalVisible={modalVisible} />
              {stepFormValues && Object.keys(stepFormValues).length ? (
                <UpdateForm
                  {...updateMethods}
                  updateModalVisible={updateModalVisible}
                  values={stepFormValues}
                />
              ) : null}
            </Card>
          </Spin>
        </Fragment>
      </PageHeaderWrapper>
    );
  }
}

export default CrowdActivity;
